<template>
  <div id="WordCloudEchart" :style="{ height:data.options.height,width:data.options.width }" />
</template>

<script>
import echarts from "echarts";
import resize from '@/mixins/chartResize'
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";
import {getNewEcharts} from '@/api/api'
export default {
    mixins: [resize],
    props: {
        data:{
            type: Object
        }
    },
    data() {
        return {
           chart: null
        };
    },
    watch: {
        'data.options.sourceId': {
            handler() {
                this._getNewEcharts()
            },
        },
        'data.options': {
            handler(newOptions,oldOptions) {
                this.chart.setOption(newOptions)
            },
            deep: true
        }
    },
    mounted() {
        this.initChart();
    },
    beforeDestroy() {
        if (!this.chart) {
        return;
        }
        this.chart.dispose();
        this.chart = null;
    },
    methods: {
        initChart() {
            this.chart = echarts.init(document.getElementById('WordCloudEchart'));
            this.chart.setOption(this.data.options);
        },
        _getNewEcharts(){
            const parms = {
                echartType:"wordCloud",
                sourceId:this.data.options.sourceId
            }
            getNewEcharts(parms).then(res=>{
                if(res.rcode=='0000'){
                    this.data.options.series[0].data = res.data.data
                }
            })
        }
    }
};
</script>
<style lang='scss' scoped>

</style>